<template>
  <div class="home">
    <div class="home-header">
      <div class="home-header-image">
        <img src="../../assets/img/home-header.png">
      </div>
      <p class="text">集齐所有字，免费拿好礼</p>
    </div>
    <Time :processingShow="processingShow" :endShow="endShow" :image="image" :timestamp="timestamp"></Time>
    <div class="home-footer">
      <div class="start" @click="start">
        <p class="start-text">开始集字</p>
      </div>
    </div>
  </div>
</template>

<script>
import $fly from 'flyio'
import api from '../../assets/js/api.js'
import Time from '../../components/Time'
export default {
  name: 'Home',
  data () {
    return {
      processingShow: true,
      endShow: false,
      image: '',
      timestamp: 0,
      start_date: ''
    }
  },
  components: {
    Time
  },
  async created () {
    // const href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx2074e0399923599c&redirect_uri=http://word.demo&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
    const href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxca5e782125e89f46&redirect_uri=http://word.xmfinger.com&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
    if ( !await api.checkLogin() ) {
      const queryCode = location.search //查询参数-用户的code
      const userCode = queryCode.slice(queryCode.indexOf("=") + 1,queryCode.indexOf("&")) //获取用户的code
      if ( !userCode ) {
        window.location.href = href
      } else {
        api.login(userCode)
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    // const href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx2074e0399923599c&redirect_uri=http://word.demo&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
    const href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxca5e782125e89f46&redirect_uri=http://word.xmfinger.com&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
    if (localStorage.getItem('powerListPage') === 'help') {
      next( async (vm) => {
        if (!await api.checkLogin()) {
          const queryCode = location.search //查询参数-用户的code
          const userCode = queryCode.slice(queryCode.indexOf("=") + 1,queryCode.indexOf("&")) //获取用户的code
          if (!userCode) {
            window.location.href = href
          } else {
            await api.login(userCode)
            if (localStorage.getItem('access_token')) {
              next('/PowerListPage')
            }
          }
        }
      })
    } else if (localStorage.getItem("wordPage") === 'wordPages') {
        next( async (vm) => {
          if ( !await api.checkLogin() ) {
            const queryCode = location.search //查询参数-用户的code
            const userCode = queryCode.slice(queryCode.indexOf("=") + 1,queryCode.indexOf("&")) //获取用户的code
            if ( !userCode ) {
              window.location.href = href
            } else {
              await api.login(userCode)
              if (localStorage.getItem('access_token')) {
                next('/WordPage')
              }
            }
          }
        })
    } else{
        next()
    }
  },
  mounted () {
    this.authRequests()
  },
  methods: {
   start () {
    //  this.$router.push({path: '/WordPage'})
    //  window.location.href = "http://word.xmfinger.com/WordPage"
     window.location.assign("http://word.xmfinger.com/WordPage") //ios有时会出现无法获取jssdk的情况，刷新就正常了，测试用这种方法不会出现上述情况
   },
   authRequests () {
     api.authRequest('game')
    .then( (res) => {
      this.image = res.data.image
      this.timestamp = res.data.end_date
      this.start_date = res.data.start_date
      let currentTime = new Date().getTime() / 1000
      if (currentTime > this.timestamp) {
        this.processingShow = false
        this.endShow = true
      }
    })
    .catch( (err) => {
      console.log(err)
    })
   }
  }
}
</script>

<style lang="stylus" scoped>
  .home
    height 1334px
    background url("../../assets/img/background-img.png") no-repeat
    background-size cover
    .home-header
      padding-top 77px
      text-align center
      margin-bottom 79px
      .home-header-image
        width 579px
        height 265px
        margin 0 auto
        img
          width 100%
          height auto
      .text
        color #fff
        font-size 30px
        margin-top 48px
    .home-footer
      margin-top 104px
      .start
        width 329px
        height 97px
        margin 0 auto
        background url("../../assets/img/start.png") no-repeat
        background-size cover
        text-align center
        .start-text
          font-size 48px; /*px*/
          color #fff
          height 88px
          line-height 88px
</style>
